<template>
    <!--这里是我们的html结构-->
    <div class="chooseCity">
        <el-cascader :clearable="clearable" ref="cascaderRef" style="width: 100%;" :options="optionsArea" v-model="optionsSelected"
                     @change="handleCityChange" lazyLoad :props="defaultProps"></el-cascader>
    </div>
</template>

<script>
import { getAreaCitySelect } from '@/api/system/areas'
export default {
    name: 'index',
    props: [
        'areaSelected','clearable','defaultProps'
    ],
    data() {
        return {
            province_id: 0,
            city_id: 0,
            optionsArea: [],
            optionsSelected: [],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.optionsSelected = []
            const { data } = await getAreaCitySelect()
            this.optionsArea = data
            this.optionsSelected = this.areaSelected
        },
        handleCityChange(val) {
            if (val) {
                const obj = this.$refs['cascaderRef'].getCheckedNodes()
                const code = obj[0].data.code
                this.$emit('area-change', val, code)
            }
        },
        beforeUpdate() {
            this.optionsArea = data   // 城市数据需要重新赋值
        },
    }
}
</script>
<style>
.el-cascader__item {
    height: 30px;
}
.el-cascader-panel {
    height: 300px;
}
</style>
